import React, {Component} from 'react';
import {NavigationContainer} from "@react-navigation/native";
import {createStackNavigator} from "@react-navigation/stack";
import {createBottomTabNavigator} from "@react-navigation/bottom-tabs";
import Ionicons from "react-native-vector-icons/Ionicons";
import HomePage from "./pages/Home";
import BlogPage from "./pages/Blog";
import ListPage from "./pages/List";
import DetailPage from "./pages/Detail";
import Logo from "./components/Logo/index"
function BottonTab () {
    const Tab = createBottomTabNavigator();
    return (
        <Tab.Navigator
            screenOptions={({route}) => ({
                tabBarIcon: ({focused, color, size}) => {
                    let iconName;
                    switch (route.name){
                        case "首页":
                            iconName = "ios-home";
                            break;
                        case "列表":
                            iconName = "ios-list";
                            break;
                        case "文章":
                            iconName = "ios-globe";
                            break;
                    }
                   
                    return (
                        <Ionicons
                            name={iconName}
                            color={color}
                            size={size}
                        />
                    )
                }
            })}
            tabBarOptions={{
                activeTintColor: "#23b8ff",
                inactiveTintColor: "#999999"
            }}
        >
            <Tab.Screen
                name="首页"
                component={HomePage}
            />
            <Tab.Screen
                name="列表"
                component={ListPage}
            />
            <Tab.Screen
                name="文章"
                component={BlogPage}
            />
        </Tab.Navigator>
    )
}

class Txclass extends Component {
    constructor(props){
        super(props);
        this.state = {
        }
    }
    render(){
       const Stack = createStackNavigator();
        return (
            <NavigationContainer>
                <Stack.Navigator>
                    <Stack.Screen
                        name="Tab"
                        component={BottonTab.bind(this)}
                        options={{
                            headerTitle: props => <Logo {...props}/>
                        }}
                    />
                    <Stack.Screen
                        name="Detail"
                        component={DetailPage}
                        options={{
                            headerTitle: props => <Logo {...props}/>,
                            headerBackTitle: "返回"
                        }}
                    />
                </Stack.Navigator>
            </NavigationContainer>
        )
    }
}
export default Txclass;
